<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <link rel="stylesheet" href="css/element-ui.css"/>
    <script src="js/vue.js"></script>
    <script src="js/element-ui.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <div style="position: relative;top: 200px;left: 520px;width: 450px">
        <h3 style="text-align: center;font-size: 25px">用户登陆</h3>
        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px">
            <el-form-item label="登陆名称" prop="username">
                <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="登陆密码" prop="password">
                <el-input type="password" v-model="loginForm.password"></el-input>
            </el-form-item>

            <el-form-item label="验证码" prop="code">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content bg-purple"><el-input type="text" v-model="loginForm.code"></el-input></div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <img :src="code" @click="refreshCaptcha" width="120px" height="40px"/>
                        </div>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登 陆</el-button>
                <el-button>取 消</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                loginForm: {
                    username: '',
                    password: '',
                    code: '',
                    uuid: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名称', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入用户密码', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ],
                },
                code: ''
            }
        },
        methods: {
            initCodeImage() {
                axios({
                    url: '/captcha/getVerifyCodeImage',
                    method: 'GET'
                }).then(response => {
                    console.log(response);
                    if (response.data.code === 200) {
                        this.code = response.data.data;
                        this.loginForm.uuid = response.data.uuid;
                        console.log(this.loginForm.uuid);
                    }
                });

            },

            submitForm(form) {
                axios({
                    url: '/user/login',
                    method: 'POST',
                    data: this.loginForm
                }).then(response => {
                    if (response.data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: response.data.msg
                        });
                        location.href = 'main.html';
                    } else if (response.data.code === 500) {
                        this.$message({
                            type: 'error',
                            message: response.data.msg
                        });
                        this.initCodeImage(); // 重新调用初始化验证码的方法
                    }
                })
            },

            refreshCaptcha() {
                this.initCodeImage(); // 重新调用初始化验证码的方法
            },

        },
        created() {
            this.initCodeImage();
        }
    });
</script>
<style>
    body {
        height: 100vh;
        background: linear-gradient(to left, hotpink, tomato, white);
    }
</style>
</html>
